import React, { useEffect, useState } from 'react'
import madelStyle from "@/assets/css/madel.module.scss"

export default function ModelPopup(props) {
  const mpStyle = {
    width: "100%",
    height: "100vh",
    position: "fixed",
    left: "0",
    top: "0",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  }
  const mpModel = {
    width: "100%",
    height: "100vh",
    background: "rgba(0,0,0,0.5)"
  }
  const mpContent = {
    position: "absolute",
    left: "50%",
    top: "50%",
    transform: "translate(-50%, -50%)",
  }

  const [visibleMadel, setVisibleMadel] = useState(props.visibleMadel);


  return (
    <div className={ visibleMadel ? madelStyle.cmaskBlock : madelStyle.cmaskNone }>
      <div style={mpStyle}>
        <div style={mpModel}  className={ visibleMadel ? madelStyle.cmaskCur : madelStyle.cmaskCurs } onTouchStart={() => setVisibleMadel(false)}></div>
        <div style={mpContent}>{props.children}</div>
      </div>
    </div>
  )
}
